<template>

  <el-autocomplete
    v-model="displayValue"
    v-trim
    clearable
    :trigger-on-focus="false"
    :debounce="350"
    :fetch-suggestions="querySearchAsync"
    v-bind="$attrs"
    :popper-class="show?'autocomplete-show':''"
    @select="handleSelect"
    @focus="focushandle"
    @blur="blurhandle"
    @clear="clearhandle"
  />
</template>

<script>
import { queryUser } from '@/api/utils'
export default {
  name: 'AutoComplete',
  props: {
    value: {
      type: [Number, String],
      default: null
    },
    queryType: {
      type: [String], // 1 查询用户，2，查询部门，3查询合作公司, 4全部部门查询
      default: '1'
    },
    valueName: {
      type: [String], // 在输入框需要显示的字段名
      default: 'name'
    },
    noClear: {
      type: Boolean,
      default: true
    },
    flag: {
      type: Boolean, // true查询在职/离职相关的数据 ;不传或者false只查在职的数据
      default: false
    }
  },
  data() {
    return {
      show: false,
      nowItem: []
    }
  },
  computed: {
    displayValue: {
      get() {
        return this.value
      },
      set(modifiedValue) {
        if (modifiedValue === '暂无数据') {
          this.displayValue = this.nowItem.length > 0 ? this.nowItem[0].value : ''
        }
        // console.log('444445555', modifiedValue)
        this.$emit('input', modifiedValue)
      }
    }
  },
  created() {
  },
  mounted() { },
  methods: {
    // 远程搜索
    async querySearchAsync(queryString, cb) {
      const action = queryUser
      const params = {
        keyword: queryString,
        isQueryPage: this.flag,
        pageParam: {
          currentPage: 1,
          pageSize: 100
        }
      }
      let arr = []
      this.show = false
      if (queryString === ' ') {
        cb(arr)
        return
      }
      try {
        const { data } = await action(params)
        var list = data.list || []
        if (list.length > 0) {
          list.forEach(element => {
            let value = ''
            if (this.queryType === '1') {
              value = `${element.name}(${element.employeeNumber})`
            } else if (this.queryType === '2') {
              value = `${element.name}-${element.employeeNumber}`
            } else if (this.queryType === '3') {
              value = `${element.name}`
            } else if (this.queryType === '4') {
              value = `${element.name}-${element.deptName}`
            }
            arr.push({
              id: element.id,
              name: element.name,
              value: value,
              deptId: element.deptId,
              deptName: element.deptName,
              employeeNumber: element.employeeNumber
            })
          })
        } else {
          this.show = true
          arr = [{ value: '暂无数据', id: '暂无数据' }]
        }
      } catch (error) {
        console.log(error)
      }
      cb(arr)
    },
    handleSelect(item) {
      if (item.id === '暂无数据') {
        this.displayValue = this.nowItem.length > 0 ? this.nowItem[0].value : ''
      } else {
        this.nowItem = []
        this.nowItem.push(item)
        this.$emit('idSelect', item)
        this.$emit('input', item.value)
      }
    },
    focushandle() {
      if (this.noClear) {
        this.displayValue = ''
      }
    },
    blurhandle() {
      if (this.noClear) {
        if (this.nowItem.length > 0) {
          this.displayValue = this.nowItem[0].value
        } else {
          this.displayValue = ''
        }
      }
    },
    clearhandle() {
      this.nowItem = []
      const clearData = {
        id: '',
        name: '',
        employeeNumber: ''
      }
      this.$emit('idSelect', clearData)
    }
  }
}

</script>

// 使用方法
//           <auto-completes
//                    v-model="requestForm.applicantName"
//                    class="input-width"
//                    placeholder="请输入申请人"
//                    :no-clear="true"
//                    :flag="true"
//                    @idSelect="getApplyName"
//                  />